<template>
  <div id="out">
			<div class="top">
				<div class="top1">单品收藏</div>
				<div class="top2">个性收藏</div>
			</div>
			<div class="mid">预留图片展示位</div>
			<div class="btm-t">
				<div class="btm-t1">
					<div class="btm-t1-1"></div>
					<div class="btm-t1-2">汇方圆</div>
					<div class="btm-t1-3">外卖</div>
				</div>
				<div class="btm-t2">
					<img src="/static/imgs_s11/s011_Cocktail.png" alt="">
					<img src="/static/imgs_s11/s011_Cocktail.png" alt="">
				</div>
				<div class="btm-t3">
					<span class="btm-t3-1">羊肉串</span>
					<span class="btm-t3-2">长沙臭豆腐</span>
				</div>
				<div class="btm-t4">
					<span class="btm-t4-1">共2件</span>
					<span class="btm-t4-2">¥ 20.19</span>
					<div class="btm-t4-3">再来一单</div>
				</div>
			</div>
			<div class="btm-t btm-t-1">
				<div class="btm-t1">
					<div class="btm-t1-1"></div>
					<div class="btm-t1-2">汇方圆</div>
					<div class="btm-t1-3">外卖</div>
				</div>
				<div class="btm-t2">
					<img src="/static/imgs_s11/s011_Cocktail.png" alt="">
					<img src="/static/imgs_s11/s011_Cocktail.png" alt="">
				</div>
				<div class="btm-t3">
					<span class="btm-t3-1">羊肉串</span>
					<span class="btm-t3-2">长沙臭豆腐</span>
				</div>
				<div class="btm-t4">
					<span class="btm-t4-1">共2件</span>
					<span class="btm-t4-2">¥ 20.19</span>
					<div class="btm-t4-3">再来一单</div>
				</div>
			</div>
			
		</div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
			#out{
				width: 375px;
				height: 667px;
				background-color: rgb(244,244,244);
				border:#F0F0F0 solid 1px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
			}
			#out .top{
				height: 36px;
				background-color: white;
				margin-top: 60px;
				display:flex;
			}
			#out .top .top1{
				width: 52px;
				height: 12px;
				font-size: 13px;
				margin: 11px 68px;
				color: #666666;
				
			}
			#out .top .top2{
				font-size: 13px;
				width: 55px;
				height: 23px;
				margin-top: 11px;
				margin-left: 60px;
				border-bottom: #32B16C solid 2px;
				color: #32B16C;
				
			}
			#out .mid{
				height: 75px;
				margin-top: 10px;
				text-align:center;
				background-color: #E0E0E0;
				font-size: 20px;
				color: #B2B1B1;
				line-height: 75px;
				margin-bottom: 15px;
			}
			#out .btm-t,.btm-b{
				height: 210px;
				background-color: white;
				/* margin-top: 15px; */
				
			}
			#out .btm-b{
				margin-top: 15px;
			}
			#out .btm-t .btm-t1{
				height: 40px;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-top: 10px;
				padding-left: 10px;
			}
			#out .btm-t .btm-t1 .btm-t1-1{
				width: 30px;
				height: 30px;
				background-color:rgb(243,243,243);
				border-radius: 5px;
				/* margin-top: 5px; */
				/* margin-left: 5px; */
				
			}
			#out .btm-t .btm-t1 .btm-t1-2{
				
				font-size: 13px;
				margin-left: 10px;
				
				
			}
			#out .btm-t .btm-t1 .btm-t1-3{
				background-color: rgb(239,145,81);
				color: white;
				font-size: 10px;
				width: 40px;
				height: 18px;
				margin-left: 10px;
				text-align: center;
				line-height: 18px;
				border-radius: 5px;
				
				}
				#out .btm-t .btm-t2{
					height: 80px;
				}
				#out .btm-t .btm-t2 img{
					width: 85px;
					height: 85px;
					border-radius: 8px;
					margin-left: 10px;
				}
				#out .btm-t .btm-t3{
					height: 10x;
					font-size: 10px;
					margin-top: 10px;
				}
				#out .btm-t .btm-t3 .btm-t3-1{
					margin-left: 12px
				}
				#out .btm-t .btm-t3 .btm-t3-2{
					margin-left: 60px
				}
				#out .btm-t .btm-t4{
					height: 50px;
					
					display: flex;
					align-items: center;
					margin-top: 5px;
					
					
					
				}
				#out .btm-t .btm-t4 .btm-t4-1{
					color: #909090;
					font-size: 10px;
					
					margin-left: 15px;
				}
				#out .btm-t .btm-t4 .btm-t4-2{
					font-size: 13px;
					margin-left: 10px;
				}
				#out .btm-t .btm-t4 .btm-t4-3{
					display: inline-block;
					font-size: 12px;
					width: 100px;
					height: 25px;
					border: #C0BFBF solid 1px;
					text-align: center;
					line-height: 25px;
					margin-left: 150px;
					
					border-radius: 5px;
				}
				#out .btm-t-1{
					margin-top: 10px;
				}
			
			
			
			
		</style>
